<template>
  <view class="card_item_container ">
    <view class="card_list flex">
      <view class="card_item flex_c" v-for="item in list" :key="item.id">
        <navigator 
        :url="`/pages/course/detail/index?courseId${item.id}`" 
        open-type="navigate" 
        hover-class="navigator-hover"
        >
          <image :src="type === 'course' ? item.cover : item.avatar" class="card_item_img" />
          <view class="card_item_content">
            <block v-if="type === 'course'">
              <view class="card_item_title">{{ item.title }}</view>
              <view class="card_item_info">
                <uni-icons type="fire-filled" size="18" color="red"></uni-icons>
                {{ item.lessonNum }} 已学习
              </view>
              <view class="card_item_market flex">
                <view class="card_item_price">￥ {{ item.price }}&nbsp;</view>
                <view class="card_item_buy">{{ item.buyCount }} 人购买</view>
              </view>
            </block>
            <block v-else>
              <view class="teacher_intro">{{ item.intro }}</view>
              <view class="teacher_name">{{ item.name }}</view>
            </block>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { containId } from '@/utils/type'
const props = defineProps<{
  list: containId[],
  type: string,
}>()
</script>

<style scoped lang="less">
.card_item_container {
  .card_list {
    flex-wrap: wrap;
    justify-content: space-between;

    .card_item {
      background: #eee;
      margin-top: 20rpx;
      padding-bottom: 20rpx;

      .card_item_img {
        width: 335rpx;
      }

      .card_item_content {
        padding: 0 10rpx;
        width: 335rpx;

        .card_item_title {
          font-size: 26rpx;
          font-weight: bold;
        }

        .card_item_info {
          font-size: 24rpx;
          margin: 10rpx 0;
        }

        .card_item_price {
          color: #fa3f4e;
          // color: pink;
        }

        // .card_item_market {
        //   padding-bottom: 30rpx 0;
        //   .card_item_price {
        //     font-size: 28rpx;
        //     font-weight: bold;
        //     color: #fa3f4e;
        //     margin-right: 10rpx;
        //   }
        .card_item_buy {
          color: #000;
          font-size: 30rpx;
        }

        .teacher_intro {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          font-size: 24rpx;
        }

        .teacher_name {
          font-size: 26rpx;
          color: #00cc99;
          margin-top: 10rpx;
        }
      }
    }

    &::after {
      content: '';
      width: 335rpx;
    }
  }
}
</style>